<template>
    <div>
        <my-nav-bar
            title="星星"
            left-text="返回"
            right-text="按钮"
            @click-left="onClickLeft"
            @click-right="onClickRight"
        ></my-nav-bar>
        <h2>
            <p>默认</p>
            <my-rate v-model="rate1"></my-rate>
        </h2>
        <h2>
            <p>设置值</p>
            <my-rate v-model="rate2"></my-rate>
        </h2>
        <h2>
            <p>设置分值</p>
            <my-rate v-model="rate1" count="7"></my-rate>
        </h2>
        <h2>
            <p>自定义颜色</p>
            <my-rate v-model="rate1" color="#0094ff"></my-rate>
        </h2>
        <h2>
            <p>自定义大小</p>
            <my-rate v-model="rate1" size="18px"></my-rate>
        </h2>
        <h2>
            <p>设置描述</p>
            <my-rate v-model="rate3" :show-text="showText"></my-rate>
        </h2>

    </div>
</template>

<script>
export default {
    data() {
        return {
            rate1: '',
            rate2: '5',
            showText: ['很差','还行','一般','挺好','非常好'],
            rate3: '3',

        }
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1)
        },

        onClickRight() {
            console.log("right");
        },
    }
}
</script>

<style lang="less" scoped>
h2{
    display: flex;
    justify-content: space-between;
}
</style>
